<template>
     <div class="box1">
        <header class="header">
          <p class="p">联系客服</p>
        </header>
        <main class="content"> 
           <p class="p2"> <img src="../../img/9.jpg" alt="">欢迎登录苏宁易购</p>
           <van-form @submit="onSubmit">
  <van-cell-group inset>
    <van-field
      v-model="username"
      name="username"
      label="用户名"
      placeholder="用户名"
      :rules="[{ required: true, message: '请填写用户名' },{pattern:/^1[3-9]\d{9}$/,message:'请输入11位手机号'}]"
    />
    <van-field
      v-model="password"
      type="password"
      name="password"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
  </van-cell-group>
  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
      登录
    </van-button>
  </div>

</van-form>

 <div class="text2">
   <p>验证码登录</p>
   <p @click="$router.push('/register')">手机号注册</p>
 </div>
        </main>
       </div>
</template>

<script setup >
import request from "@/utils/request";
import { ref} from "vue";
import {useRouter} from 'vue-router'
import { showSuccessToast, showFailToast } from 'vant';
const router =useRouter()
const username=ref('')
const password=ref('')
const onSubmit=(values)=>{
   request.post('/login',{
     username:username.value,
     password:password.value
   }).then(res=>{
    if(res.data.code==200)
    {
      localStorage.setItem('token',res.data.token)
      localStorage.setItem('username',username.value)
      showSuccessToast(res.data.message);
      router.push('/')
    }else{
      showFailToast(res.data.message);
    }
   })
}
</script>

<style lang="scss" >
.box1{
  display: flex;
 flex-direction: column;
}
.p{
  float: right;
}
.p2{
  vertical-align: middle;
  margin-left: 20%;
}
.text2{
  display: flex;
  padding: 20px;
  justify-content: space-between;
}
</style>